<script setup lang="ts">
import router from '@/router'
import { notification, secretKey } from '@/services/common'
import { computed, reactive, ref } from 'vue'
import { http, CODE } from '@/plugins/axios'
import { HmacSHA256 } from 'crypto-js'

import { useI18n } from 'vue-i18n'
import type { FormInstance } from 'element-plus'
const { t } = useI18n()

const formRef = ref<FormInstance>()

const form = reactive({
  nickname: '',
  username: '',
  password: '',
  password2: '',
  phone: '',
  email: ''
})

const rule_username = [
  { required: true, message: t('请输入用户名'), trigger: 'blur' }
]

const formRules = ref({
  // username: [
  //   { required: true, message: t('请输入用户名'), trigger: 'blur' }
  // ],
  password: [
    { required: true, message: t('请输入密码'), trigger: 'blur' }
  ],
  password2: [
    { required: true, message: t('请再次输入密码'), trigger: 'blur' }
  ],
  phone: [
    { required: true, message: t('请输入手机号'), trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: () => t('手机号输入有误'), trigger: 'blur' }
  ]
})

const loading = ref(false)

const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      if (form.password !== form.password2) {
        notification({
          type: 'error',
          message: '两次密码不一致，请重新输入'
        })
        return
      }
      loading.value = true
      http({
        url: '/api/user/register',
        method: 'post',
        data: {
          nick_name: form.nickname.trim(),
          username: form.username,
          password: HmacSHA256(form.password, secretKey),
          phone: form.phone,
          email: form.email
        }
      }).then((res: any) => {
        loading.value = false
        if (res.code === CODE.SUCCESS) {
          notification({
            type: 'success',
            message: res.msg
          })
          router.push('/login')
        }
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
</script>

<template>
  <section class="section-page">
    <c-i18n-btn class="i18n-btn"></c-i18n-btn>
    <section class="section-content">
      <section class="section-title"><c-i18n>注册</c-i18n></section>

      <div class="main-box">
        <el-form ref="formRef" :rules="formRules" :model="form" label-width="135px">
          <el-form-item :label="$t('昵称')" prop="nickname">
            <el-input v-model="form.nickname" maxlength="12" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-form-item :label="$t('用户名')" prop="username" :rules="rule_username">
            <el-input v-model.trim="form.username" autocomplete="off" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-form-item :label="$t('密码')" prop="password">
            <el-input type="password" show-password v-model.trim="form.password" autocomplete="off" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-form-item :label="$t('确认密码')" prop="password2">
            <el-input type="password" show-password v-model.trim="form.password2" autocomplete="off" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-form-item :label="$t('手机号')" prop="phone">
            <el-input v-model.trim="form.phone" maxlength="11" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model.trim="form.email" type="email" :placeholder="$t('请输入')" />
          </el-form-item>
          <el-button class="submit" type="primary" :loading="loading" @click="submit(formRef)"><c-i18n>注册</c-i18n></el-button>
        </el-form>

        <div class="tip login">
          <span>
            <c-i18n>已有账号，去</c-i18n>
            <RouterLink to="/login"><c-i18n>登录</c-i18n></RouterLink>
          </span>
        </div>
      </div>
    </section>
  </section>
</template>

<style lang="scss" scoped>
.section-page {
  position: relative;
  height: 100%;
  background: url('@/assets/images/bg.png');

  .i18n-btn {
    position: absolute;
    right: 48px;
    top: 24px;
  }

  .section-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .main-box {
      margin-top: 30px;
      padding: 24px 32px;
      display: inline-block;
      width: 400px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 0 6px rgba(0, 0, 0, 0.04);

      .submit {
        margin-top: 20px;
        width: 100%;
      }

      .tip {
        margin-top: 24px;
        font-size: 12px;

        &.login {
          text-align: center;
        }

        &.fotget {
          margin-top: 12px;
          text-align: right;
        }
      }
    }

    .section-title {
      font-size: 32px;
      font-weight: 600;
    }
  }
}
</style>
